<template>
    <div class="order-report">
        <!-- <div class="report-table-top-title" style="height: 50px"> -->
        <div class="report-table-top-title">
            终端设备查询
            <div style="float: right">
                <el-button type="primary" size="small" plain @click="getPage"
                    >刷新库存</el-button
                >
            </div>
        </div>

        <div class="report-table-form1" v-if="devicestock.length>0">
            <div class="report-table-form1-line">
                <div
                    v-for="(item, index) in devicestock"
                    :key="index"
                    class="report-table-form1-item word samll"
                    style="width: 200px; margin-right: 20px"
                >
                    {{ item }}
                </div>
            </div>
        </div>

        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 250px"
                >
                    <div style="width: 60px; display: inline-block">状态:</div>
                    <el-select
                        style="width: 140px"
                        v-model="status"
                        filterable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in options1"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 250px"
                >
                    <div style="width: 80px; display: inline-block">
                        设备类型:
                    </div>
                    <el-select
                        style="width: 140px"
                        v-model="terminalTypeSearch"
                        placeholder="请选择"
                        size="small"
                    >
                        <!-- <el-option label="全部" value></el-option> -->
                        <el-option
                            v-for="(item, index) in terminalTypeList"
                            :key="index"
                            :label="item.terminalTypeName"
                            :value="item.terminalType"
                        ></el-option>
                    </el-select>
                </div>
                <!-- <el-button type="primary" size="small" @click="showDialog">添加设备</el-button>
                <el-button type="primary" size="small" @click="removeStore">移除设备</el-button> -->
                <span>
                    <div
                        class="report-table-form1-item word samll"
                        style="width: 155px"
                    >
                        主板SN码/整机序列号:
                    </div>
                    <div class="report-table-form1-item" style="width: 150px">
                        <el-input
                            v-model="searchNo"
                            placeholder
                            size="small"
                        ></el-input>
                    </div>
                    <el-button type="primary" size="small" @click="search"
                        >搜索</el-button
                    >
                </span>
            </div>
        </div>

        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                @select="checkSelect"
                :data="marketterminallist"
                border
                style="width: 100%"
            >
                <!-- <el-table-column type="selection" width="55">
                    <template slot="header"></template>
                </el-table-column> -->
                <el-table-column
                    prop="chipID"
                    label="主板SN码"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="terminalTypeName"
                    label="设备类型"
                ></el-table-column>
                <el-table-column
                    prop="chipCode"
                    label="整机序列号"
                    align="center"
                ></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="props">
                        <div v-if="props.row.status === 1">未激活</div>
                        <div v-if="props.row.status === 2">激活</div>
                    </template>
                </el-table-column>
                <el-table-column prop="managementTypeName" label="经营类型">
                </el-table-column>
                <el-table-column
                    prop="deliveryTime"
                    label="发货时间"
                    align="center"
                >
                    <template slot-scope="props">
                        <div>{{ $F(props.row.deliveryTime) }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page-padding"></div>

        <el-dialog
            title="添加设备"
            :visible.sync="dialogFormVisible"
            width="400px"
        >
            <el-form label-position="right">
                <el-form-item label="序列号" :label-width="formLabelWidth">
                    <el-input
                        v-model="chipID"
                        autocomplete="off"
                        placeholder
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancelDialog">取 消</el-button>
                <el-button size="small" type="primary" @click="okDialog"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            terminalTypeList: [],
            terminalTypeSearch: -1,
            pageType: '',
            devicestock: [],
            notactivebarnum: 0, // EMT100Y剩余库存
            notactivektvnum: 0, // EMT100T剩余库存
            yssurplussoftwareinventory: 0,
            yssoftwareinventory: 0,
            unregistedbarsoftpackagecount: 0, // 酒吧剩余软件套数
            totalbarsoftpackagecount: 0, // 酒吧软件总套数
            unregistedyunbarsoftpackagecount: 0, // 娱加云软件 剩余套数
            totalyunbarsoftpackagecount: 0, // 娱加云软件 总套数

            unregistedsoftwarecount: 0,
            unregisteddatainventorycount: 0,
            notactiveterminalnum: 0,
            marketterminallist: [],

            chipID: '',
            dialogFormVisible: false,

            formLabelWidth: '120px',

            checkList: [], // 选中商品列表,上架/下架/删除/修改出品类型都是依据此项

            searchNo: '',
            status: '',
            options1: [
                {
                    value: '全部',
                    key: ''
                },
                {
                    value: '未激活',
                    key: 1
                },
                {
                    value: '激活',
                    key: 2
                }
            ]
        }
    },
    mounted () {
        this.getOnlyTerminalType()
        this.getPage()
    },
    created () {
    },
    watch: {
    },
    components: {
    },
    props: {
        underLine: null,
        type: Number
    },
    computed: {
        manageArr () {
            return this.$store.state.manageArr
        }
    },
    methods: {
        getOnlyTerminalType () {
            this.$http.get(this.$store.state.IP + '/system/company/getOnlyTerminalType?isAll=0', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.terminalTypeList = response.data
                    this.terminalTypeSearch = response.data.length > 0 ? this.terminalTypeList[0].terminalType : -1
                }
            }, response => {
            })
        },
        search () {
            // if (this.searchNo === '') {
            //     this.getPage()
            //     return
            // }
            this.getPage()
        },

        cancelDialog () {
            this.dialogFormVisible = false
            this.chipID = ''
        },
        showMessage (message) {
            this.$message({
                showClose: true,
                message: message,
                type: 'warning'
            })
        },
        okDialog () {
            let message = ''
            if (this.chipID === '') {
                message = '请输入序列号'
            }
            if (message !== '') {
                this.showMessage(message)
                return
            }
            this.$http.post(this.$store.state.IP + '/system/stock/addTerminal', {
                data: {
                    chipID: this.chipID
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('添加设备成功')
                    console.log(response.data)
                    this.chipID = ''
                    this.dialogFormVisible = false
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('添加设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        showDialog () {
            this.dialogFormVisible = true
        },

        removeStore () {
            this.$http.post(this.$store.state.IP + '/system/stock/removeTerminal', {
                data: {
                    chipIDList: this.checkList
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('移除设备成功')
                    console.log(response.data)
                    this.checkList = []
                    this.getPage()
                }
                if (response.ret !== '0') {
                    console.log('移除设备失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },

        checkSelect (selection, row) {
            if (this.checkList.indexOf(row.chipID) > -1) {
                this.checkList.splice(this.checkList.indexOf(row.chipID), 1)
            } else {
                this.checkList.push(row.chipID)
            }
            console.log(this.checkList)
        },

        getPage () {
            // this.searchNo = ''
            this.$http.post(this.$store.state.IP + '/system/stock/getStockByAgent', {
                data: {
                    type: 1,
                    status: this.status,
                    chipID: this.searchNo,
                    terminalType: this.terminalTypeSearch
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('获取库存详情成功')
                    console.log(response.data)
                    this.unregistedsoftwarecount = response.data.unregistedsoftwarecount
                    this.notactiveterminalnum = response.data.notactiveterminalnum
                    if (response.data.marketterminallist !== null) {
                        this.marketterminallist = response.data.marketterminallist
                    }
                    this.unregisteddatainventorycount = response.data.unregisteddatainventorycount
                    this.notactivebarnum = response.data.notactivebarnum
                    this.notactivektvnum = response.data.notactivektvnum
                    this.unregistedbarsoftpackagecount = response.data.unregistedbarsoftpackagecount
                    this.totalbarsoftpackagecount = response.data.totalbarsoftpackagecount
                    this.totalyunbarsoftpackagecount = response.data.totalyunbarsoftpackagecount
                    this.unregistedyunbarsoftpackagecount = response.data.unregistedyunbarsoftpackagecount
                    this.yssoftwareinventory = response.data.yssoftwareinventory
                    this.yssurplussoftwareinventory = response.data.yssurplussoftwareinventory
                    this.devicestock = response.data.devicestock
                }
                if (response.ret !== '0') {
                    console.log('获取库存详情失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-transfer-panel
    width: 400px

.has-gutter
    .el-checkbox
        display: none

.order-report
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
